<template>
    <div id="baiduHistory" class="baiduMap"></div>
</template>

<script>
    export default {
        props: {
            imei: String
        },
        data () {
            return {
                map: null,         // 地图对象
                points: [],      // 所有点集合
                centerPoint: null, // 中间点
                car: null,
                index: 0, //记录播放到第几个point
                timer: null,
                count: 60, // 帧数
                time: 60, // 速度
            }
        },
        methods: {
            getSpeed (per) {
                this.time = (100 - per) / 50 * 60
            },
            /***
             * 此处调用函数，根据传入的位置数据，得到轨迹信息
             * 所需坐标点集合格式为
             let points = [
             [113.9394600, 22.553278],
             [113.9195983, 22.553173],
             [113.9393583, 22.523433],
             [113.9195553, 22.523033]
             ]
             */
            getTrail (data) {
                this.map.clearOverlays()
                this.points.length = 0
                let points = []
                data.historyRecordDTOS.forEach((item, i) => {
                    let pointArr = []
                    pointArr.push(new BMap.Point(item.longitude, item.lat))
                    new BMap.Convertor().translate(pointArr, 1, 5, (res) => {
                        if (res.status === 0) {
                            points.push([res.points[0].lng, res.points[0].lat, i])
                            /**
                             * 将坐标点转换为帧，
                             * 读取到每一帧，就setPosition一次
                             */
                            if (data.historyRecordDTOS.length === points.length) {
                                if (points.length === 0) {
                                    return
                                } else if (points.length === 1) {
                                    this.points.push(new BMap.Point(points[0][0], points[0][1]))
                                } else {
                                    /**
                                     * 排序，使每次顺序正常
                                     */
                                    points.sort((x, y) => {
                                        return x[2] - y[2]
                                    })
                                    for (let k = 0; k < points.length - 1; k++) {
                                        let x = points[k + 1][0] - points[k][0]
                                        let y = points[k + 1][1] - points[k][1]
                                        for (let i = 0; i < this.count; i++) {
                                            this.points.push(new BMap.Point(points[k][0] + i * x / this.count, points[k][1] + i * y / this.count))
                                        }
                                    }
                                }
                                this.drawHistoryTrail()
                            }
                        }
                    })
                })
            },
            drawHistoryTrail () {
                if (this.points.length > 1) {
                    this.centerPoint = new BMap.Point((this.points[0].lng + this.points[this.points.length - 1].lng) / 2, (this.points[0].lat + this.points[this.points.length - 1].lat) / 2)
                    this.map.panTo(this.centerPoint)
                    let polyline = new BMap.Polyline(this.points, {
                        strokeColor: '#FF5307',
                        strokeWeight: 5,
                        strokeOpacity: 1
                    })
                    //连接所有点
                    this.map.addOverlay(polyline)
                }
                //显示小车子
                this.car = new BMap.Marker(this.points[0], {
                    icon: new BMap.Icon('static/images/icon_1_online.png', new BMap.Size(41, 100))
                })
                this.car.setTop(true)
                let start = new BMap.Marker(this.points[0], {
                    icon: new BMap.Icon('static/images/start.png', new BMap.Size(41, 100))
                })
                let end = new BMap.Marker(this.points[this.points.length - 1], {
                    icon: new BMap.Icon('static/images/stop.png', new BMap.Size(41, 100))
                })
                this.map.addOverlay(start)
                this.map.addOverlay(end)
                this.map.addOverlay(this.car)
            },
            play () {
                /**
                 * 当前点的index小于点数组的长度 ，就++;并且继续调用play，直到index与长度相等
                 */
                if (this.car === null) {
                    this.$emit('fromMap', 'reset')
                    return
                }
                let point = this.points[this.index]
                this.car.setPosition(point)
                this.index++
                this.map.panTo(point)
                if (this.index < this.points.length) {
                    this.timer = window.setTimeout(this.play, this.time)
                } else {
                    this.map.panTo(point)
                    this.$emit('fromMap', 'playOver')
                }
            },
            pause () {
                if (this.timer) {
                    window.clearTimeout(this.timer)
                }
            },
            reset () {
                if (this.timer) {
                    window.clearTimeout(this.timer)
                }
                this.index = 0
                this.car.setPosition(this.points[0])
                this.map.panTo(this.centerPoint)
                this.$emit('fromMap', 'reset')
            }
        },
        mounted () {
            // 百度地图API功能
            this.map = new BMap.Map('baiduHistory')    // 创建Map实例
            this.map.centerAndZoom(new BMap.Point(113.956033, 22.560118), 14)  // 初始化地图,设置中心点坐标和地图级别
            //添加地图类型控件
            this.map.addControl(new BMap.MapTypeControl({
                mapTypes: [
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]
            }))
            this.map.addControl(new BMap.CityListControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                offset: new BMap.Size(70, 20),
            }))
            this.map.addControl(new BMap.GeolocationControl())// 添加定位控件
            this.map.addControl(new BMap.ScaleControl())//比例尺控件
            this.map.addControl(new BMap.NavigationControl())//缩略地图控件
            this.map.addControl(new BMap.MapTypeControl())//地图类型控件
            this.map.setCurrentCity('深圳')         // 设置地图显示的城市 此项是必须设置的
            this.map.enableScrollWheelZoom(true)     //开启鼠标滚轮缩放
        },
    }
</script>

<style scoped>
    .baiduMap {
        height: 93vh;
    }
</style>
